// 实始化数据
const state = {
  shopList: [
    {
      id: '11',
      name: '鱼香肉丝',
      price: 12
    },
    {
      id: '22',
      name: '宫爆鸡丁',
      price: 16
    },
    {
      id: '47',
      name: '米饭',
      price: 2
    }
  ],
  added: [] // 添加到购物车的商品(已选商品)
}

// getter 抛出去的数据
const getters = {
  // 商品列表
  shopList: state => state.shopList,
  // 购物车列表
  cartProducts: state => {
    return state.added.map(({id, num}) => {
      // 在actions中是只有的id和num的字段的, 所以在原始数据中查找
      let product = state.shopList.find(n => n.id === id)
      console.info('product', product)
      return {
        ...product,
        num
      }
    })
  },
  // 计算总价
  totalPrice: (state, getters) => {
    let total = 0
    // getter中可以调用getter里面的方法
    getters.cartProducts.forEach(n => {
      total += n.price * n.num
    })
    return total
  },
  // 计算总数
  totalNum: (state, getters) => {
    let total = 0
    getters.cartProducts.forEach(n => {
      total += n.num
    })
    return total
  }
}

// action 异步操作：actions中的所有操作对state中的addad数据都是共享的
const actions = {
  // 添加到购物车操作
  addToCart ({commit}, product) {
    // 传递一个add的方法，携带参数id
    commit('add', {
      id: product.id
    })
  },
  // 清除购物车
  clearAllCart ({commit}) {
    // 分发一个clearAll事件，不带参数进行
    commit('clearAll')
  },
  // 删除购物车的指定商品
  delProduct ({commit}, product) {
    commit('del', product)
  }
}

// mutations: 接受actions中commit的操作
const mutations = {
  // 添加到购物车操作 (解构id)
  add (state, {id}) {
    // 添加操作时先查看购物车中的数据，看看是否已经存在该对象
    let record = state.added.find(n => n.id === id)
    if (!record) {
      // 当购物车中不存在该对象时进行初始化
      state.added.push({
        id,
        num: 1
      })
    } else {
      record.num++
    }
  },
  // 清除购物车
  clearAll (state) {
    state.added = []
  },
  // 删除购物车中指定的商品
  del (state, product) {
    state.added.forEach((n, i) => {
      if (n.id === product.id) {
        // 找到下标值
        state.added.splice(i, 1)
      }
    })
  }
}

export default {
  state,
  mutations,
  actions,
  getters
}
